<script lang="ts" setup>
import { IUser, userModel } from '@/api/system/user';
import { FormConfig } from '@/components/Form/types';
import { NInput } from 'naive-ui';
import { computed, ref, unref } from 'vue';
import RoleSelect from '@/components/RoleSelect/index.vue';
import { useRequest } from '@/hooks/useRequest';
import { IRole } from '@/api/system/role';
import Upload from '@/components/Upload/index.vue';

interface Props {
  data: Partial<IRole>
}

const props = defineProps<Props>();

const emits = defineEmits(['close', 'submit']);
const formData = ref<Partial<IUser> & {rePassword: string}>({
  username: '',
  password: '',
  nickname: '',
  roleId: null,
  rePassword: '',
  avatar: '',
  ...props.data
});

const config = computed<FormConfig<typeof formData.value>[]>(() => {
  const baseConfig: FormConfig<typeof formData.value>[] = [
    {
      type: 'component',
      label: '用户昵称:',
      component: NInput,
      key: 'nickname',
      itemProps: {
        rule: [
          { required: true, validator(rule, value) {
            if(value.length < 2 || value.length > 16) {
              return new Error('用户昵称在2到16位之间！');
            }
            return true;
          }, trigger: 'blur' }
        ]
      }
    },
    {
      type: 'component',
      label: '用户头像:',
      component: Upload,
      key: 'avatar',
      itemProps: {
        rule: [
          { required: true, validator(rule, value) {
            if(!value) {
              return new Error('请选择用户头像！');
            }
            return true;
          }, trigger: 'blur' }
        ]
      }
    },
    {
      type: 'component',
      label: '所属角色:',
      component: RoleSelect,
      key: 'roleId',
      itemProps: {
        rule: [
          { required: true, validator(rule, value) {
            if(!value) {
              return new Error('请选择所属角色!');
            }
            return true;
          }, trigger: 'blur' }
        ]
      }
    }
  ];
  if(!unref(formData).id) {
    baseConfig.push.apply(
      baseConfig,
      [
        {
          type: 'component',
          label: '用户名:',
          component: NInput,
          key: 'username',
          itemProps: {
            rule: [
              { required: true, validator(rule, value) {
                if(value.length < 6 || value.length > 16) {
                  return new Error('用户名在6到16位之间！');
                }
                return true;
              }, trigger: 'blur' }
            ]
          }
        },
        {
          type: 'component',
          label: '密码:',
          component: NInput,
          key: 'password',
          props: {
            type: 'password'
          },
          itemProps: {
            rule: [
              { required: true, validator(rule, value) {
                if(value.length < 6 || value.length > 16) {
                  return new Error('密码在6到16位之间！');
                }
                return true;
              }, trigger: 'blur' }
            ]
          }
        },
        {
          type: 'component',
          label: '确认密码:',
          component: NInput,
          key: 'rePassword',
          props: {
            type: 'password'
          },
          itemProps: {
            rule: [
              { required: true, validator(rule, value) {
                if(!value) {
                  return new Error('请确认密码!');
                }
                if(value.length < 6 || value.length > 16) {
                  return new Error('密码在6到16位之间！');
                }
                if(unref(formData).password !== value) {
                  return new Error('两次输入密码不一致！');
                }
                return true;
              }, trigger: 'blur' }
            ]
          }
        }
      ]
    );
  }
  baseConfig.push(
    {
      type: 'slot',
      slotName: 'submit'
    }
  );
  return baseConfig;
});
const { run } = useRequest(userModel.upgrade, { manual: true });

const userUpgradeForm = ref();
async function submit() {
  await userUpgradeForm.value.validate();
  const params = {
    ...unref(formData)
  };
  await run(params);
  emits('submit');
}
</script>
<template>
  <div>
    <Form
      ref="userUpgradeForm"
      v-model:data="formData"
      :label-width="90"
      :config="config"
    >
    <template #submit>
        <div class="flex justify-end gap-mini">
          <NButton @click="emits('close')">
            取消
          </NButton>
          <NButton type="primary" @click="submit">
            确定
          </NButton>
        </div>
      </template>
    </Form>
  </div>
</template>
